Link an Editor to a Form View Control

IN THIS PAGE

Define a List Control
Create an Editor and EditorSet
Define the Form View Control and Link it to the Editor

Description

Editor containers make updating a form view quite easy. There are a number of pre-defined editors in the defined controls section of the UX Controls page.

Combining List Controls, Form View Controls, and Editor Containers can produce UX components that are light and, at the same time, quite powerful. To illustrate, compare the combination of list, form view, and editor to a list control with detail view.

One of the main steps in creating a list control with a detail view is to define a number of data controls, such as textbox controls, inside a component. Each field in the list control can then be mapped to one of these individual data controls; using the settings in the List Builder's Detail View pane. Once mapped, these data controls can then be used to display information from a given field whenever a row in the list control is highlighted, forming a detail view. The fields that are mapped do not necessarily have to be displayed in the list control's list layout in order to be displayed. They only need to exist in the list's source data.

Common design for a list with a detail view.

If the list that contains the detail view is updateable then additional buttons can be added to the component; such as the List-Detail View-Buttons from the 'Defined Controls' section of the UX Controls page. These buttons are tied directly to a specified list control and can save changes to the detail view, synchronize changes to data on the client with the server, and carry out a host of other tasks. If the component contains a large number of lists then using this architecture will require a large number of data controls in order to display information in the list control and to update the list with new data.

The list, form view, editor set-up produces results almost identical to a list with a detail view without using large number of controls. All of the data that would normally be displayed inside of textboxes on a list detail view can be displayed using one form view control instead. The data used to populate the form view control can be edited or updated using an 'Editor'. An editor is simply a container that wraps around a data control or set of controls that can be used to update the formview. Once one editor is defined, it can be used as template by multiple form view controls in order to update information inside each individual form view control.

Different fields inside a single form view control can be hooked to different types of editors in a component. This can be accomplished quite easily using the pre-defined editors available in the Defined Controls section of the UX Controls page. For example, a 'Country' field in a form view can be tied to a Editor-List control, that displays a list of countries to select from and enter into a form view. A simple 'Contact' field in the same form view could be tied to an Editor-TextBox control. Editor containers should be defined inside an EditorSet, which is a container for editor containers.

Define a List Control

In the UX Builder on the UX Controls page open the 'Data Controls' menu. Click on the [List] option to add a list control to the component.
Highlight the list control. In the properties list on the right click the [...] button next to the 'List properties' property in the List Properties section. The list builder should open.
On the 'Data Source' pane of the list builder set the 'Data Source Type' list select the SQL option.
Click the [...] button next to the 'Connection string' property in the SQL Data Source section. Create a connection to the Northwind database and click OK to return to the Data Source pane.
Click the [...] button next to the 'Table name' property and select the 'Customers' table
Click the [...] button next to the 'Field list' property. Select the ContactName, City, and Country fields. Click OK
Open the 'List Layout' pane in the List Builder. Highlight ContactName, City, and Country fields in the Available Fields list. Use the blue right arrow icon to move the fields to the 'Columns in List' section and click OK to close the list builder.

Create an Editor and EditorSet

On the UX Controls page open the 'Containers' menu and select the [Container] option.
From the 'Container Type' list select 'EditorSet' and click 'Insert After'
Highlight the opening tag of the EditorSet container in the controls tree. Open the 'Containers' menu a second time.
From the 'Container Type' list select the 'Editor' option and click 'Insert After'.
Highlight the opening tag of the Editor container in the controls tree. Open the 'Data Controls' menu and click on [TextBox] to add a textbox control to the editor container. Give the control the default name 'textbox1'.
Highlight the textbox control in the controls tree. In the properties list on the right click the [...] button next to the 'onKeyUp' property in the Javascript section

Select the 'Text mode' editing mode option, add the following code, and click 'Save'.

// get name of containing EDITOR_SET for this editor
var edObj = {dialog.object}._EDITOR_EDITORSET['EDITOR_TEXT'];
var es = '';
if(typeof edObj != 'undefined') es = edObj.editorSet;
if(typeof es == 'undefined') es = '';

if(es != '') {dialog.object}.editorEcho(es)

Open the 'Other Controls' menu. Click on the [Button] option to add a button control to the editor.
Highlight the button control. In the properties list on the right change the 'Button text' property to read 'Save'.
Scroll down to the 'Javascript' section of the properties list and click the [...] button next to the 'onClick' property.

Select the 'Text mode' editing mode option, add the following code, and click 'Save'

var closeEditorAfterCommit = true;
	{dialog.object}.editorCommit('editor:EDITOR_1',closeEditorAfterCommit);

Highlight the opening editor container tag in the controls tree, [Editor:EDITOR_1].
Click the [...] button next to the 'Get value from editor' property on the right.
Add the following line of code to get the value that is entered into the textbox control. Click OK
```
return {dialog.object}.getValue('textbox1');
```
Click the [...] button next to the 'Set value in editor' property.
Add the following line of code to the set value in editor property and click OK.
```
{dialog.object}.setValue('textbox1',value);
```

Define the Form View Control and Link it to the Editor

On the UX Controls page highlight the list control. Open the 'Other Controls' menu on the left and click on the [Form View] option to add a form view control to the component.
Highlight the Form View control in the controls tree. In the properties list on the right click the [...] button next to the 'Form properties' property in the Form Properties section. The Form View Builder will open.
Open the 'Data Source' pane. From the 'Datasource type' dropdown select the 'List' option.
Click the [...] button next to the 'List name' property. Select the name of the list you defined in the first section, list1, and click OK.
Open the 'Fields' pane. The three fields that you defined in the list control should be visible. Highlight the 'ContactName' field.
In the 'Editing' section, of the properties list on the right, click the [...] button next to the 'Editor set' property.
In the Select Editor dialog set the 'Editor Set' to be EDITORSET_1 and the 'Editor' to be EDITOR_1.
Click the 'Assign selection to multiple fields' hyperlink at the bottom of the 'Select Editor' dialog.
Highlight all of the fields in the 'Select Multiple Fields' dialog and click OK.
Open the Form Layout pane of the Form View Builder. From the 'Method for designing Layout' options select the 'Genie' radio button option, then click the 'Add item' button at the bottom of the pane.
In the 'Select Control Type' dialog highlight 'Data Controls' in the 'Category:' list and in the 'Control:' list select [Label]. Highlight all of the fields that appear on the right and click OK. Click OK again to close the form view builder.
Run the component in 'Live Preview'. Click on any row in the List control and the Form View should appear, displaying all of the details from that row.
Click on one of the fields in the form view control and the editor should appear.
Change the text inside the editor's textbox control and click the 'Save' button. The edited text should now be set in the Form View control.